<template>
    <div class="container">
        <Alert>
            <Form :model="searchObj" inline>
                <FormItem>
                    <Select clearable v-model="searchObj.type" style="width:200px" placeholder="请选择权利类型">
                        <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </FormItem>
                <FormItem>
                    <Input v-model="searchObj.title" class="search-input" clearable placeholder="请输入事项名称"/>
                </FormItem>
                <FormItem>
                    <Input v-model="searchObj.xing_quan_code" class="search-input" clearable placeholder="请输入事项编码"/>
                </FormItem>
                <FormItem>
                    <Input v-model="searchObj.action_subject" class="search-input" clearable placeholder="请输入实施主体"/>
                </FormItem>
                <FormItem>
                    <Button class="search-btn" type="primary" @click="searchAction">
                        <Icon type="ios-search"/>
                        搜索
                    </Button>
                </FormItem>
            </Form>
        </Alert>
        <Row>
            <vxe-toolbar custom export></vxe-toolbar>
            <vxe-table
                    border
                    resizable
                    export-config
                    :tooltip-config="{theme:'light',enterable:true, enabled: false}"
                    highlight-hover-row
                    size="medium"
                    :loading="tableLoading"
                    align="center"
                    header-align="center"
                    :sort-config="{trigger: 'cell'}"
                    :data="tableData"
                    :checkbox-config="{checkField: 'checked'}">
                <vxe-table-column type="seq" title="#" width="60"></vxe-table-column>
                <vxe-table-column width="180" field="type" title="权力类型">
                    <template v-slot="{row}">
                        <span>{{RowTypeList[row.type]}}</span>
                    </template>
                </vxe-table-column>
                <vxe-table-column width="180" field="xing_quan_code" title="事项编码"></vxe-table-column>
                <vxe-table-column width="500" header-align="center" align="left" field="title" title="事项名称">
                    <template v-slot="{row}">
                        <span v-if="row.project_name && row.subitem">{{row.project_name}} - {{row.subitem}}</span>
                        <span v-if="row.project_name && !row.subitem">{{row.project_name}}</span>
                        <span v-if="!row.project_name && !row.subitem"> </span>
                    </template>
                </vxe-table-column>
                <vxe-table-column width="180" field="action_subject" title="实施主体"></vxe-table-column>
                <vxe-table-column width="180" field="fill_state" title="完成状态">
                    <template v-slot="{row}">
                        <span v-if="row.fill_state == '0'">填报中</span>
                        <span v-if="row.fill_state == '1'">已完成</span>
                    </template>
                </vxe-table-column>
                <vxe-table-column width="180" field="login_name" title="创建机构"></vxe-table-column>
                <vxe-table-column width="180" field="create_time" title="创建时间"></vxe-table-column>
                <vxe-table-column width="200" fixed="right" field="action" title="操作">
                    <template v-slot="{row}">
                        <Button v-if="row.fill_state != '1'" type="primary" size="small" class="action-btn"
                                @click="optionAction(row, 'edit')">编辑
                        </Button>
                        <Button type="info" size="small" class="action-btn"
                                @click="optionAction(row, 'info')">详情
                        </Button>
                        <Button v-if="row.fill_state == '0'" type="success" size="small" class="action-btn"
                                @click="finishState(row)">完成填报
                        </Button>
                        <Button v-if="row.fill_state == '1'" type="warning" size="small" class="action-btn"
                        @click="cancelState(row)">取消完成
                        </Button>
                    </template>
                </vxe-table-column>
            </vxe-table>
        </Row>
        <br>
        <Row type="flex" justify="end">
            <Page show-sizer show-total :current="pageObj.pageNo" :page-size="pageObj.pageSize"
                  :total="pageObj.totalRecord"
                  @on-change="getPageNo" :page-size-opts="[10,20,50,200]" @on-page-size-change="pageSizeChange"/>
        </Row>
    </div>
</template>

<script>
import {
  getGovBaseList,
  updateFillState
} from '@/api/setting/base-info'

export default {
  name: 'BaseInfo',
  data () {
    return {
      searchObj: {},
      modalShow: false,
      btnLoading: false,
      formItem: {},
      tableColumns: [
        { title: '权力类型', key: 'shi_quan_type', width: 150, align: 'center' },
        { title: '事项名称', key: 'title', width: 180 },
        { title: '事项编码', key: 'xing_quan_code', width: 160, align: 'center' },
        { title: '添加时间', key: 'create_time', width: 160, align: 'center' }
        // { title: '办理地点', slot: 'ban_li_address', width: 140, align: 'center' },
        // { title: '工作时间', key: 'work_run_time', width: 140, align: 'center' },
        // { title: '咨询方式', key: 'zi_xun_type', width: 150, align: 'center' }
      ],
      typeList: [
        {
          value: '1',
          label: '行政征收'
        },
        {
          value: '2',
          label: '行政裁决'
        },
        {
          value: '3',
          label: '行政给付'
        },
        {
          value: '4',
          label: '行政奖励'
        },
        {
          value: '5',
          label: '行政确认'
        },
        {
          value: '6',
          label: '行政许可'
        },
        {
          value: '7',
          label: '行政强制'
        },
        {
          value: '8',
          label: '行政检查'
        },
        {
          value: '9',
          label: '行政处罚'
        },
        {
          value: '10',
          label: '其他权力'
        },
        {
          value: '11',
          label: '项目管理'
        },
        {
          value: '12',
          label: '资金管理'
        },
        {
          value: '13',
          label: '资产管理'
        },
        {
          value: '14',
          label: '人事管理'
        }
      ],
      RowTypeList: {
        1: '行政征收',
        2: '行政裁决',
        3: '行政给付',
        4: '行政奖励',
        5: '行政确认',
        6: '行政许可',
        7: '行政强制',
        8: '行政检查',
        9: '行政处罚',
        10: '其他权力',
        11: '项目管理',
        12: '资金管理',
        13: '资产管理',
        14: '人事管理'
      },
      tableData: [],
      selectData: [],
      tableLoading: false,
      pageObj: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      }
    }
  },
  methods: {
    finishState (val) {
      let param = {
        id: val.gov_id,
        fill_state: '1'
      }
      this.$Modal.confirm({
        title: '确定已经完成填报？',
        loading: true,
        onOk: () => {
          updateFillState(param).then(ret => {
            let data = ret.data
            if (data.errcode === 0) {
              this.$Modal.remove()
              this.init()
              this.success('已完成')
            } else {
              this.$Modal.remove()
              this.error(data)
            }
          })
        }
      })
    },
    cancelState (row) {
      let param = {
        id: row.gov_id,
        fill_state: '0'
      }
      this.$Modal.confirm({
        title: '取消已完成填报？',
        loading: true,
        onOk: () => {
          updateFillState(param).then(ret => {
            let data = ret.data
            if (data.errcode === 0) {
              this.$Modal.remove()
              this.init()
              this.success('已取消')
            } else {
              this.$Modal.remove()
              this.error(data)
            }
          })
        }
      })
    },
    cancelOption () {
      this.modalShow = false
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    getPageNo (pageNo) {
      this.pageObj.pageNo = pageNo
      this.init()
    },
    pageSizeChange (e) {
      this.pageObj.pageSize = e
      this.init()
    },
    initPage () {
      this.pageObj.pageNo = 1
    },
    searchAction () {
      this.initPage()
      this.init()
    },
    init (data) {
      const obj = {
        pageNo: this.pageObj.pageNo,
        pageSize: this.pageObj.pageSize,
        type: this.$common.xeUtils.trim(this.searchObj.type),
        title: this.$common.xeUtils.trim(this.searchObj.title),
        xing_quan_code: this.$common.xeUtils.trim(this.searchObj.xing_quan_code),
        action_subject: this.$common.xeUtils.trim(this.searchObj.action_subject)
      }
      let param = data || obj
      this.tableLoading = true
      getGovBaseList(param).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.tableData = data.data.results
          this.tableData.forEach((item) => {
            item.create_time = this.$common.xeUtils.toDateString(item.create_time)
          })
          this.pageObj.totalRecord = data.data.totalRecord
          this.tableLoading = false
        } else {
          this.tableLoading = false
          this.error(data)
        }
      })
    },
    optionAction (row, type) {
      switch (type) {
        case 'edit':
          this.$router.push({
            name: 'rulePageList',
            query: { id: row.id }
          })
          break
        case 'info':
          this.$router.push({
            name: 'MatterDetail',
            query: { id: row.id }
          })
          break
      }
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped lang="less">
    .container {
        margin-bottom: 50px;
    }

    .container /deep/ .ivu-btn-small {
        height: 24px;
        padding: 0 5px;
        font-size: 12px;
        border-radius: 3px !important;
    }

    .action-btn {
        margin-right: 5px;
        margin-bottom: 3px;
    }
</style>
